<template>
	<view class="wui-indexBar">
		<slot></slot>
		<view class="index-text-box" :class="[showIndex ? 'index-show' : 'index-hidd']">{{ indexList[current] }}</view>
		<view class="index-list">
			<view class="index-item"
				:class="[index === current ? 'index-item-active' : '', 'index-num-positions-' + item]"
				v-for="(item, index) in indexList" :key="index" @click="indexClick(index)"
				@touchstart="touchstart(index)" @touchmove.stop.prevent="touchmove" @touchend="touchend">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'w-indexBar',
		props: {
			scrollTop: {
				type: Number
			},
			indexList: {
				type: Array,
				default: () => ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				]
			},
			offsetTop: {
				type: [Number, String],
				default: 0
			},
		},
		data() {
			return {
				current: 0,
				showIndex: false,
				timer: null,

				isTouch: false,

				// 左侧索引的位置信息
				indexItemPositions: [],
				// 右侧索引的位置信息
				indexNumPositions: [],

				stickyOffsetTop: 0
			};
		},
		created() {
			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : this.getCustomBarHeight();
		},
		mounted() {
			this.$wuiUtils.queryChilds.call(this, 'w-indexBarItem', child => {
				this.$nextTick(() => {
					child.selectorQueryPromise().then(data => {
						this.indexItemPositions.push({
							// #ifdef MP-WEIXIN
							top: data.top,
							bottom: data.bottom,
							// #endif
							// #ifdef H5
							top: data.top - this.stickyOffsetTop,
							bottom: data.bottom - this.stickyOffsetTop
							// #endif
						});
					})
				})
			});

			this.pageScrollTo();
		},
		watch: {
			scrollTop(val) {
				if (val === 0) {
					this.current = 0;
				} else {
					this.indexItemPositions.forEach((item, index, arr) => {
						if (val >= item.top && val < item.bottom) {
							this.current = index;
						}
					});
				}
			},
			indexList: {
				immediate: true,
				handler(list) {
					this.$nextTick(() => {
						this.indexNumPositions = []
						list.forEach(item => {
							uni.createSelectorQuery()
								.in(this)
								.select('.index-num-positions-' + item)
								.boundingClientRect((data) => {
									this.indexNumPositions.push(data);
								})
								.exec();
						});
					})
				},
			}
		},
		methods: {
			// 页面滚动
			pageScrollTo(scrollTo = 0, duration = 400) {
				this.$nextTick(() => {
					uni.pageScrollTo({
						duration: duration,
						scrollTop: scrollTo
					});
				});
			},
			// 获取wui自定义导航栏高度
			getCustomBarHeight() {
				const systemInfo = this.systemInfo;
				let customBar = 0;
				// #ifdef MP-WEIXIN
				const custom = wx.getMenuButtonBoundingClientRect();
				customBar = custom.bottom + custom.top - systemInfo.statusBarHeight - systemInfo.statusBarHeight;
				// #endif
				// #ifdef H5
				customBar = 44;
				// #endif
				return customBar;
			},
			indexClick(index) {
				this.$nextTick(() => {
					this.current = index;
					this.pageScrollTo(this.indexItemPositions[index].top);
				});
			},
			showIndexBox() {
				if (!this.timer) {
					this.showIndex = true;
					this.timer = setTimeout(() => {
						this.showIndex = false;
						this.timer = null;
					}, 2000);
				}
			},
			touchstart(index) {
				this.isTouch = true;
				this.current = index;
				this.showIndexBox()
			},
			touchmove(e) {
				if (this.isTouch) {
					let clientY = e.changedTouches[0].clientY;
					console.log(clientY)
					console.log(this.indexNumPositions)
					this.indexNumPositions.forEach((item, index) => {
						if (clientY >= item.top && clientY < item.bottom) {
							this.current = index
						}
					});
					this.showIndexBox()
				}
			},
			touchend() {
				if (this.isTouch) {
					this.pageScrollTo(this.indexItemPositions[this.current].top);
					this.isTouch = false
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.wui-indexBar {
		position: relative;

		.index-text-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 160rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 68rpx;
			border-radius: 6rpx;
			background-color: rgba(0, 0, 0, 0.36);
			color: #fff;
			transition: zIndex 0.1s, opacity 0.3s;
		}

		.index-show {
			z-index: 9;
			opacity: 1;
		}

		.index-hidd {
			z-index: 0;
			opacity: 0;
		}

		.index-list {
			position: fixed;
			top: 50%;
			right: 10rpx;
			transform: translateY(-50%);
			background-color: #fff;

			.index-item {
				width: 38rpx;
				height: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #616161;
				font-size: 30rpx;
			}

			.index-item-active {
				color: #1486ff;
			}
		}
	}
</style>
